// SVG Finder Extension - Content Script
// 这个脚本运行在网页中，负责查找 SVG 元素

// 消息类型常量
const MESSAGE_TYPES = {
    SHOW_SCRAPED_SVGS: 'show_scraped_svgs',
    ERROR_WHILE_SCRAPING: 'error_while_scraping'
};

// 防止重复执行
if (window.svgFinderInjected) {
    console.log('🔄 SVG Finder 已经注入，跳过');
} else {
    window.svgFinderInjected = true;
    console.log('🎯 SVG Finder 内容脚本开始运行');

    // 主要的 SVG 查找函数
    async function scrapeSvgs() {
        console.log('🔍 开始查找 SVG 元素');

        const svgData = [];
        const errors = [];

        try {
            // 查找所有 SVG 元素
            const svgElements = document.querySelectorAll('svg');
            console.log(`📊 找到 ${svgElements.length} 个 SVG 元素`);

            svgElements.forEach((svg, index) => {
                try {
                    // 获取 SVG 的外部 HTML
                    const svgHtml = svg.outerHTML;

                    // 获取 SVG 的尺寸信息
                    const rect = svg.getBoundingClientRect();
                    const computedStyle = window.getComputedStyle(svg);

                    // 计算 SVG 统计信息
                    const pathCount = svg.querySelectorAll('path').length;
                    const circleCount = svg.querySelectorAll('circle').length;
                    const rectCount = svg.querySelectorAll('rect').length;
                    const polygonCount = svg.querySelectorAll('polygon').length;
                    const childElementsCount = svg.querySelectorAll('*').length;

                    // 计算 SVG 大小
                    const svgSize = new Blob([svgHtml], { type: 'image/svg+xml' }).size;

                    // 生成文件名
                    const filename = `svg_${index + 1}_${Date.now()}.svg`;

                    // 获取 SVG 的基本信息
                    const svgInfo = {
                        id: `svg_${index}`,
                        outerHTML: svgHtml,
                        width: svg.getAttribute('width') || rect.width || 'auto',
                        height: svg.getAttribute('height') || rect.height || 'auto',
                        viewBox: svg.getAttribute('viewBox') || '',
                        title: (svg.querySelector('title') && svg.querySelector('title').textContent) || `SVG ${index + 1}`,
                        description: (svg.querySelector('desc') && svg.querySelector('desc').textContent) || '',
                        visible: rect.width > 0 && rect.height > 0 && computedStyle.display !== 'none',
                        position: {
                            x: rect.left,
                            y: rect.top,
                            width: rect.width,
                            height: rect.height
                        },
                        parentElement: (svg.parentElement && svg.parentElement.tagName && svg.parentElement.tagName.toLowerCase()) || 'unknown',

                        // 统计信息
                        childElementsCount: childElementsCount,
                        pathCount: pathCount,
                        circleCount: circleCount,
                        rectCount: rectCount,
                        polygonCount: polygonCount,

                        // 属性信息
                        attributes: {
                            class: svg.className.baseVal || '',
                            fill: computedStyle.fill || 'currentColor',
                            stroke: computedStyle.stroke || 'none'
                        },

                        // 下载数据
                        downloadData: {
                            size: svgSize,
                            url: '',
                            filename: filename
                        }
                    };

                    // 尝试获取 SVG 的源 URL（如果是通过 img 标签引用的）
                    if (svg.parentElement && svg.parentElement.tagName === 'IMG') {
                        svgInfo.src = svg.parentElement.src;
                    }

                    // 检查是否为内联 SVG
                    svgInfo.isInline = !svgInfo.src;

                    // 生成下载 URL
                    try {
                        const serializer = new XMLSerializer();
                        const svgString = serializer.serializeToString(svg);
                        const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
                        const svgUrl = URL.createObjectURL(svgBlob);
                        svgInfo.downloadData.url = svgUrl;
                        svgInfo.previewUrl = svgUrl;
                        svgInfo.dataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgString)))}`;
                    } catch (previewError) {
                        console.warn('⚠️ 无法生成 SVG 预览 URL：', previewError);
                        svgInfo.downloadData.url = '';
                        svgInfo.previewUrl = '';
                        svgInfo.dataUrl = '';
                    }

                    svgData.push(svgInfo);
                    console.log(`✅ 成功处理 SVG ${index + 1}:`, svgInfo.title);

                } catch (error) {
                    console.error(`❌ 处理 SVG ${index + 1} 时出错:`, error);
                    errors.push(`SVG ${index + 1}: ${error.message}`);
                }
            });

            // 查找通过 img 标签引用的 SVG 文件
            const imgElements = document.querySelectorAll('img[src$=".svg"], img[src*=".svg?"], img[src*=".svg#"]');
            console.log(`📊 找到 ${imgElements.length} 个 SVG 图片`);

            // 异步处理 img 引用的 SVG
            const imgPromises = Array.from(imgElements).map(async(img, index) => {
                try {
                    const rect = img.getBoundingClientRect();
                    const computedStyle = window.getComputedStyle(img);

                    // 生成文件名
                    const filename = `svg_img_${index + 1}_${Date.now()}.svg`;

                    let svgContent = '';
                    let svgSize = 0;
                    let pathCount = 0;
                    let circleCount = 0;
                    let rectCount = 0;
                    let polygonCount = 0;
                    let childElementsCount = 0;
                    let actualWidth = 'auto';
                    let actualHeight = 'auto';
                    let viewBox = '';

                    // 尝试获取 SVG 内容
                    try {
                        const response = await fetch(img.src);
                        if (response.ok) {
                            svgContent = await response.text();
                            svgSize = new Blob([svgContent], { type: 'image/svg+xml' }).size;

                            // 解析 SVG 内容以获取统计信息
                            const parser = new DOMParser();
                            const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
                            const svgElement = svgDoc.querySelector('svg');

                            if (svgElement) {
                                pathCount = svgElement.querySelectorAll('path').length;
                                circleCount = svgElement.querySelectorAll('circle').length;
                                rectCount = svgElement.querySelectorAll('rect').length;
                                polygonCount = svgElement.querySelectorAll('polygon').length;
                                childElementsCount = svgElement.querySelectorAll('*').length;
                                actualWidth = svgElement.getAttribute('width') || 'auto';
                                actualHeight = svgElement.getAttribute('height') || 'auto';
                                viewBox = svgElement.getAttribute('viewBox') || '';
                            }

                            console.log(`✅ 成功获取 SVG 图片内容 ${index + 1}`);
                        } else {
                            console.warn(`⚠️ 无法获取 SVG 图片内容 ${index + 1}: ${response.status}`);
                            svgSize = img.naturalWidth * img.naturalHeight * 0.1 || 1024; // 估算
                        }
                    } catch (fetchError) {
                        console.warn(`⚠️ 获取 SVG 图片内容时出错 ${index + 1}:`, fetchError);
                        svgSize = img.naturalWidth * img.naturalHeight * 0.1 || 1024; // 估算
                    }

                    const svgInfo = {
                        id: `img_svg_${index}`,
                        outerHTML: svgContent || img.outerHTML,
                        src: img.src,
                        width: img.width || rect.width || actualWidth,
                        height: img.height || rect.height || actualHeight,
                        viewBox: viewBox,
                        alt: img.alt || `SVG Image ${index + 1}`,
                        title: img.title || img.alt || `SVG Image ${index + 1}`,
                        description: '',
                        visible: rect.width > 0 && rect.height > 0 && computedStyle.display !== 'none',
                        position: {
                            x: rect.left,
                            y: rect.top,
                            width: rect.width,
                            height: rect.height
                        },
                        parentElement: (img.parentElement && img.parentElement.tagName && img.parentElement.tagName.toLowerCase()) || 'unknown',
                        isInline: false,

                        // 统计信息
                        childElementsCount: childElementsCount,
                        pathCount: pathCount,
                        circleCount: circleCount,
                        rectCount: rectCount,
                        polygonCount: polygonCount,

                        // 属性信息
                        attributes: {
                            class: img.className || '',
                            fill: 'unknown',
                            stroke: 'unknown'
                        },

                        // 下载数据
                        downloadData: {
                            size: svgSize,
                            url: img.src,
                            filename: filename
                        }
                    };

                    // 如果获取到了 SVG 内容，生成预览和下载 URL
                    if (svgContent) {
                        try {
                            const svgBlob = new Blob([svgContent], { type: 'image/svg+xml' });
                            const svgUrl = URL.createObjectURL(svgBlob);
                            svgInfo.downloadData.url = svgUrl;
                            svgInfo.previewUrl = svgUrl;
                            svgInfo.dataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgContent)))}`;
                        } catch (previewError) {
                            console.warn('⚠️ 无法生成 SVG 预览 URL：', previewError);
                            svgInfo.previewUrl = img.src;
                            svgInfo.dataUrl = '';
                        }
                    } else {
                        svgInfo.previewUrl = img.src;
                        svgInfo.dataUrl = '';
                    }

                    return svgInfo;

                } catch (error) {
                    console.error(`❌ 处理 SVG 图片 ${index + 1} 时出错:`, error);
                    errors.push(`SVG 图片 ${index + 1}: ${error.message}`);
                    return null;
                }
            });

            // 等待所有 img SVG 处理完成
            const imgSvgResults = await Promise.all(imgPromises);
            const validImgSvgs = imgSvgResults.filter(svg => svg !== null);
            svgData.push(...validImgSvgs);

            if (validImgSvgs.length > 0) {
                console.log(`✅ 成功处理了 ${validImgSvgs.length} 个 SVG 图片`);
            }

            // 检查是否找到了 SVG
            if (svgData.length === 0) {
                const errorMessage = '此页面没有找到 SVG 元素';
                console.log('❌ ' + errorMessage);

                // 发送错误消息
                chrome.runtime.sendMessage({
                    type: MESSAGE_TYPES.ERROR_WHILE_SCRAPING,
                    data: {
                        message: errorMessage,
                        details: '页面中没有找到<svg>标签或.svg 图片',
                        errors: errors,
                        pageInfo: {
                            title: document.title,
                            url: window.location.href,
                            timestamp: new Date().toISOString()
                        }
                    }
                });
                return;
            }

            // 发送抓取到的 SVG 数据
            console.log(`🎉 抓取完成，共找到 ${svgData.length} 个 SVG 元素`);
            chrome.runtime.sendMessage({
                type: MESSAGE_TYPES.SHOW_SCRAPED_SVGS,
                data: {
                    svgs: svgData,
                    count: svgData.length,
                    errors: errors,
                    pageInfo: {
                        title: document.title,
                        url: window.location.href,
                        timestamp: new Date().toISOString()
                    }
                }
            });

        } catch (error) {
            console.error('❌ 抓取 SVG 时发生致命错误：', error);

            // 发送错误消息
            chrome.runtime.sendMessage({
                type: MESSAGE_TYPES.ERROR_WHILE_SCRAPING,
                data: {
                    message: '抓取 SVG 时发生错误',
                    details: error.message,
                    errors: [error.message],
                    pageInfo: {
                        title: document.title,
                        url: window.location.href,
                        timestamp: new Date().toISOString()
                    }
                }
            });
        }
    }

    // 等待页面加载完成后开始抓取
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            console.log('📄 页面加载完成，开始抓取 SVG');
            setTimeout(scrapeSvgs, 100); // 短暂延迟确保页面完全渲染
        });
    } else {
        console.log('📄 页面已加载，立即开始抓取 SVG');
        setTimeout(scrapeSvgs, 100); // 短暂延迟确保页面完全渲染
    }

    // 添加样式用于调试（可选）
    const style = document.createElement('style');
    style.textContent = `
        .svg-downloader-highlight {
            outline: 2px solid #ff6b6b !important;
            outline-offset: 2px !important;
        }
    `;
    document.head.appendChild(style);

    console.log('✅ SVG Downloader 内容脚本初始化完成');
}